import React, {Component} from 'react';
import {
    FlatList,
    Image,
    RefreshControl,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View,
    Text,
} from 'react-native';

// 一些常量设置
const cols = 3; // 列数
const left = 10; // 左右边距
const top = 10; // 上下边距
const ImageWH = (Config.deviceWidth - (cols + 1) * left) / cols; // 图片大小

export default class List_Grid extends Component {

    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
        };
    }

    _onRefresh = () => {
        this.setState({
            refreshing: true
        });

        setTimeout(() => {
                this.setState({
                    refreshing: false
                });
            }, 3000
        );
    };

    // 返回cell
    renderRow(rowData) {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => this.props.navigation.navigate('Detail2', {title: 'Detail2', des: rowData.item.uri})}
            >
                <View style={styles.innerViewStyle}>
                    <Image source={{uri: rowData.item.uri}} style={styles.iconStyle}/>
                </View>
            </TouchableOpacity>
        );
    }

    _keyExtractor = (item, index) => {
        return item.uri + index
    };

    render() {

        return (
            <View style={styles.wrapper}>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                >

                    <View style={styles.gridView}>
                        <FlatList
                            style={{backgroundColor: "#FFFDDD", paddingBottom: top}}
                            renderItem={this.renderRow.bind(this)}//这里需要bind(this)，将navigation传递给每个item
                            data={this.props.data}
                            keyExtractor={this._keyExtractor}
                            numColumns={cols}
                            columnWrapperStyle={styles.columnStyle}
                            horizontal={false}
                        />
                    </View>

                </ScrollView>

            </View>

        );
    }
}

let styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        flexDirection: 'column'
    },
    slide1: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 15,
        fontWeight: 'bold',
        alignSelf: 'center',
        marginBottom: 5,
    },
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
    bannerImg: {
        width: '100%',
        height: '99%'
    },
    gridView: {
        flex: 1,
    },
    innerViewStyle: {
        width: ImageWH,
        height: ImageWH * 0.8,
        marginLeft: left,
        marginTop: top,
        // 文字内容居中对齐
        alignItems: 'center'
    },
    iconStyle: {
        width: ImageWH,
        height: ImageWH * 0.8,
    },

});